<template>
    <div id="tree" class="custom-tree-container">
        <el-tree :data="Table" node-key="id" default-expand-all :expand-on-click-node="false">
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                    <span>{{ node.label }}</span>
                    <span>
                        <!-- @click="append(data)" -->
                        <a>
                            <el-button text @click="open1()">
                                <span class="iconfont icon-add"></span>
                            </el-button>
                        </a>
                        <!-- //@click="append(data)" -->
                        <a style="margin-left: 8px">
                            <el-button text @click="open2()">
                                <span class="iconfont icon-edit"></span>
                            </el-button>
                        </a>
                        <!-- //@click="remove(node, data)" -->
                        <a style="margin-left: 8px">
                            <el-button text @click="open3()">
                                <span class="iconfont icon-ashbin">
                                </span>
                            </el-button>
                        </a>
                    </span>
                </span>
            </template>
        </el-tree>
    </div>

    <teleport to="body">
        <!-- to后面的地址还可以是 html  或者其他 div等 -->
        <!-- 表示将teleport包裹的这个div,移动到html这个结构中 -->

        <!-- 模态框1 -->
        <el-dialog class="mo" title="添加组织" width="30%" :before-close="handleClose1" v-model="dialogVisible1">
            <div id="big">
                <div id="zuzhi">
                    <p>组织名称</p>
                    <div class="demo-input-size">
                        <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                </div>
                <div id="zuzhi">
                    <p>组织类型</p>
                    <el-select v-model="value1" class="m-2" placeholder="请选择">
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div id="zuzhi">
                    <p>关联任务类型：</p>
                    <div class="my-4 flex items-center text-sm">
                        <el-checkbox v-model="checked1" label="疾控核实" />
                        <el-checkbox v-model="checked2" label="120 转运" />
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取消</el-button>
                    <el-button type="primary" @click="define1()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 模态框2 -->
        <el-dialog class="mo" title="修改组织" width="30%" :before-close="handleClose2" v-model="dialogVisible2">
            <div id="big">
                <div id="zuzhi">
                    <p>组织名称</p>
                    <div class="demo-input-size">
                        <el-input v-model="input2" class="w-50 m-2" size="large" placeholder="请输入" />
                    </div>
                </div>
                <div id="zuzhi">
                    <p>组织类型</p>
                    <el-select v-model="value2" class="m-2" placeholder="请选择">
                        <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>
                <div id="zuzhi">
                    <p>关联任务类型：</p>
                    <div class="my-4 flex items-center text-sm">
                        <el-checkbox v-model="checked1" label="疾控核实" />
                        <el-checkbox v-model="checked2" label="120 转运" />
                    </div>
                </div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="define2()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>

        <!-- 模态框3 -->
        <el-dialog class="mo" v-model="dialogVisible3" title="删除确认" width="30%" :before-close="handleClose3">
            <p>该数据删除后不能恢复，是否确认删除</p>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible3 = false">取消</el-button>
                    <el-button type="primary" @click="del()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </teleport>
</template>

<script lang="ts" >
import { defineComponent, ref, onBeforeMount, reactive, toRefs, onMounted } from 'vue'
import axios from '@/util/http'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { ElMessageBox } from 'element-plus'
import { add } from 'lodash'
import { tableV2CellProps } from 'element-plus/es/components/table-v2/src/cell'


export default defineComponent({
    name: "guanxi",
    setup() {
        interface Tree {
            id: number
            label: string
            children?: Tree[]
        }
        let id = 1000


        // const append = (data: Tree) => {
        //     const newChild = { id: id++, label: 'testtest', children: [] }
        //     if (!data.children) {
        //         data.children = []
        //     }
        //     data.children.push(newChild)
        //     dataSource.value = [...dataSource.value]
        // }

        // const remove = (node: Node, data: Tree) => {
        //     const parent = node.parent
        //     const children: Tree[] = parent.data.children || parent.data
        //     const index = children.findIndex((d) => d.id === data.id)
        //     children.splice(index, 1)
        //     dataSource.value = [...dataSource.value]
        // }

        const renderContent = (
            h,
            {
                node,
                data,
                store,
            }: {
                node: Node
                data: Tree
                store: Node['store']
            }
        ) => {
            return h(
                'span',
                {
                    class: 'custom-tree-node',
                },
                h('span', null, node.label),
                h(
                    'span',
                    null,
                    h(
                        'a',
                        {
                            // onClick: () => append(data),
                        },
                        'Append '
                    ),
                    h(
                        'a',
                        {
                            style: 'margin-left: 8px',
                            // onClick: () => remove(node, data),
                        },
                        'Delete'
                    )
                )
            )
        }

        // const dataSource = ref<Tree[]>([
        //     {
        //         id: 0,
        //         label: '相城区流调指挥中心',
        //         children: [
        //             {
        //                 id: 1,
        //                 label: '病例流调组',
        //                 children: [
        //                     {
        //                         id: 13,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             },
        //             {
        //                 id: 2,
        //                 label: '密接排查组',
        //                 children: [
        //                     {
        //                         id: 14,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             }, {
        //                 id: 3,
        //                 label: '信息组',
        //                 children: [
        //                     {
        //                         id: 15,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             }, {
        //                 id: 4,
        //                 label: '联络组',
        //                 children: [
        //                     {
        //                         id: 16,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             }, {
        //                 id: 5,
        //                 label: '采样和消毒组',
        //                 children: [
        //                     {
        //                         id: 17,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             }, {
        //                 id: 6,
        //                 label: '核酸检测组',
        //                 children: [
        //                     {
        //                         id: 18,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             }, {
        //                 id: 7,
        //                 label: '后勤保障住',
        //                 children: [
        //                     {
        //                         id: 19,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             }, {
        //                 id: 8,
        //                 label: '技术支持组',
        //                 children: [
        //                     {
        //                         id: 20,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             }, {
        //                 id: 9,
        //                 label: '元和街道',
        //                 children: [
        //                     {
        //                         id: 21,
        //                         label: '下塘社区',
        //                     },
        //                     {
        //                         id: 22,
        //                         label: '北街社区',
        //                     },
        //                     {
        //                         id: 23,
        //                         label: '湖沁社区',
        //                     },
        //                     {
        //                         id: 24,
        //                         label: '鑫口社区',
        //                     },
        //                     {
        //                         id: 25,
        //                         label: '娄北社区',
        //                     },
        //                     {
        //                         id: 26,
        //                         label: '南街社区',
        //                     },
        //                 ],
        //             },
        //             {
        //                 id: 10,
        //                 label: '太平街道',
        //                 children: [
        //                     {
        //                         id: 27,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             },
        //             {
        //                 id: 11,
        //                 label: '元和集中隔离点',
        //                 children: [
        //                     {
        //                         id: 28,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             },
        //             {
        //                 id: 12,
        //                 label: '希尔顿大酒店集中隔离点',
        //                 children: [
        //                     {
        //                         id: 29,
        //                         label: '暂无',
        //                     },
        //                 ],
        //             },
        //         ],
        //     }
        // ])

        const dialogVisible1 = ref(false)

        const handleClose1 = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }
        const dialogVisible2 = ref(false)

        const handleClose2 = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }

        const dialogVisible3 = ref(false)

        const handleClose3 = (done: () => void) => {
            ElMessageBox.confirm('确认关闭？')
                .then(() => {
                    done()
                })
                .catch(() => {
                    // catch error
                })
        }
        //模态框
        let isShow = reactive({
            showDialog: false,//模态框
        });
        function open1() {
            dialogVisible1.value = true //激活模态框1
        };
        function open2() {
            dialogVisible2.value = true //激活模态框2
        };
        function open3() {
            dialogVisible3.value = true //激活模态框3
        };
        //删除
        function del() {
            axios({
                method: 'post',
                url: '/districtOrganization/deleteOrganization',
                params: {
                    id: treeList.id
                }
            }).then((res) => {
                console.log('删除成功');
                dialogVisible3.value = false;
            })

        };
        // let xdata=ref("");
        // let xri=ref("");
        function define1() { //添加组织确认按钮
            let b = input1.value; //组织名称
            let c = value1.value; //组织类型
            if (b && c) {
                axios({
                    method: 'post',
                    url: '/districtOrganization/addOrganization',
                    data: {
                        orgName: input1.value,
                        orgType: value1.value,
                        parentId: treeList.id,
                        taskType: checked1.value,
                        topOrganization:`${localStorage.area}+'流调疾控中心'`
                    }
                }).then((res) => {
                    console.log('添加成功');
                    dialogVisible1.value = false;
                })
            }
            else {
                alert("请输入内容")
            }
        };

        function define2() { //编辑组织确认按钮
            let b = input2.value; //组织名称
            let c = value2.value; //组织类型
            if (b && c) {
                axios({
                    method: 'post',
                    url: '/districtOrganization/updateOrganization',
                    data: {
                        orgId: treeList.id,
                        orgName: input2.value,
                        orgType: value2.value,
                        taskType: checked2.value,
                        topOrganization:`${localStorage.area}流调疾控中心`
                    }
                }).then((res) => {
                    console.log('修改成功');
                    dialogVisible2.value = false;
                })   
            }
            else {
                alert("请输入内容")
            }
        };


        const input1 = ref('');//组织名称
        const value1 = ref('');//组织类型
        const input2 = ref('');//
        const value2 = ref('');//
        const input3 = ref('');//
        const value3 = ref('');//

        const options1 = [
            {
                value: '请选择',
                label: '请选择',
            },
            {
                value: '街道/社区',
                label: '街道/社区',
            },
            {
                value: '集中隔离点',
                label: '集中隔离点',
            },
            {
                value: '部门组织',
                label: '部门组织',
            }
        ];

        const options2 = [
            {
                value: '请选择',
                label: '请选择',
            },
            {
                value: '街道/社区',
                label: '街道/社区',
            },
            {
                value: '集中隔离点',
                label: '集中隔离点',
            },
            {
                value: '部门组织',
                label: '部门组织',
            }
        ];

        const checked1 = ref('疾控核实')//疾控核实
        const checked2 = ref('120转运')//转运

        const checked3 = ref('疾控核实')//疾控核实
        const checked4 = ref('转运')//转运

        const treeList: any = reactive({//创建一个由id和label属性构成的对象
            id: '',//属性ID
            label: '',//属性内容

        })
        let Table: any = reactive([])//创建一个变量接受由普通对象形成的数组
        onMounted(() => {
            axios({
                method: 'get',
                url: '/districtOrganization/queryAllOrganizations',
                params: {
                    topOrganization: "相城区"
                }
            }).then((res) => {
                // console.log("成功");
                console.log(res);//查看拿到的数据
                res.data.data.forEach((element) => {//遍历拿到的数据
                    treeList.id = element.orgId//将每一项的ID赋值给创建对象的ID
                    treeList.label = element.orgName//将每一项的name赋值给创建对象的label
                    
                    // console.log(treeList)//查看对象中的值
                    Table.push(JSON.parse(JSON.stringify(treeList)))//将创建的对象变成普通对象添加到Table数组中
                    // console.log(Table)//查看Table中的值
                })
                // console.log(Table.table);
                // Table.table.forEach(element => {
                //     element.createDate
                // });
                console.log(Table)
            });
        })


        return {
            // append,
            // remove,
            // dataSource,
            renderContent,//
            dialogVisible1,//
            handleClose1,//
            input1,//
            value1,//
            input2,//
            value2,//
            options1,//
            options2,
            checked1,//
            checked2,//
            checked3,//
            checked4,//
            dialogVisible2,//
            handleClose2,//
            dialogVisible3,//
            handleClose3,//
            Table,//
            ...toRefs(Table),//
            isShow,//
            open1,//
            open2,//
            open3,//
            del,//
            define1,//
            define2,//




        }
    }

})




</script>
<style scoped>
#tree {
    margin-left: 0px;
    margin-top: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: row;
    background-color: white;
    width: 100%;
    font-size: 13px;
    color: #333;
}

#i {
    margin: 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

#mo {
    /* 创建遮罩层 */
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}



#big {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#zuzhi {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

/deep/ .el-input {
    width: 240px;
}

#zuzhi>p {
    padding-right: 10px;
}
</style>